<!--
  封装选择商户， 选择应用的通用组件
  支持上移效果 和 普通input两种方式；

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/04/06 10:14
-->
<template>
  <template v-if="props.textUpStyle">
    <jeepay-text-up :value="props.value" :placeholder="props.placeholder" @update:value="changeFunc">
      <template #suffix>
        <a-tooltip title="搜索" @click="() => jeepayModelMchListRef.show({mchNo: props.value}) ">
          <search-outlined />
        </a-tooltip>
      </template>
    </jeepay-text-up>
  </template>
  <template v-else>
    <a-input :allowClear="true" :value="props.value" :placeholder="props.placeholder" :disabled="props.disabled" @change="changeFunc($event.target.value)">
      <template #suffix>
        <a-tooltip v-if="!props.disabled" title="搜索" @click="() => jeepayModelMchListRef.show({mchNo: props.value}) ">
          <search-outlined />
        </a-tooltip>
      </template>
    </a-input>
  </template>
  
  <JeepayModelMchList
    ref="jeepayModelMchListRef"
    :showType="props.showType"
    :onlyMchNo="onlyMchNo"
    :onlyMchName="onlyMchName"
    :mchNoAndName="mchNoAndName"
    @selectFinishFunc="searchMchFinishFunc"
  />
</template>

<script lang="ts" setup>
import {ref, defineProps, defineEmits} from 'vue'

const jeepayModelMchListRef = ref()

// 定义组件的传入参数 
const props = defineProps({
    value: { type: [String, Number], default: null },
    placeholder: {type: String, default: ''},
    disabled: { type: Boolean, default: false },
    showType: { type: String, default: 'MCH' }, // 选择类型： MCH / MCH_APP / MCH_STORE / MCH_APP_STORE
    textUpStyle: { type: Boolean, default: false }, // 是否文字上移的效果
    onlyMchNo: { type: Boolean, default: false}, // 搜索时仅展示商户号
    onlyMchName: { type: Boolean, default: false}, // 搜索时仅展示商户名称
    mchNoAndName: { type: Boolean, default: false}, // 搜索时展示商户名和商户号
})

// 定义向父组件 通讯 func 
const emit = defineEmits(['update:value'])

// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。 
function changeFunc(value){
    emit('update:value', value)
}


// 选择商户 / 应用 完成后的操作
// [商户号， 应用， 门店]
function searchMchFinishFunc(selectVal){

    if(props.showType =='MCH' && selectVal[0]){
        changeFunc(selectVal[0])
    }

    if(props.showType =='MCH_APP' && selectVal[1]){
        changeFunc(selectVal[1])
    }

    if(props.showType =='MCH_STORE' && selectVal[2]){
        changeFunc(selectVal[2])
    }

    jeepayModelMchListRef.value.close()

}


</script>